<template>
  <div id="app">
    <!-- 第一次 -->
    <!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">about</router-link>
     -->

    <!-- <router-link to="/home" tag="button" replace >首页</router-link>
    <router-link to="/about" tag="button" replace >about</router-link> -->

<!-- 第二次 -->
    <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button> -->

    <!-- 第三次 -->
    <router-link to="/home" >首页</router-link>
    <router-link to="/about" >关于</router-link>
    <router-link :to="'/user/'+userid">用户</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userid:"lisi"
    }
  },
  methods: {
    // homeClick(){
    //   //之前使用router 有一个router-link to 可以实现URL内容的改变，现想实现同样效果
    //   //  通过代码来实现，不要绕过vue-router(vue-router源码中给每个组件写了一个 $router属性)
    //   // this.$router.push('/home');
    //   this.$router.replace('/home')
    //   console.log("shouye");
    // },
    // aboutClick(){
    //   // this.$router.push('/about');
    //   this.$router.replace("/about")
    //   console.log("关于");
    // }
  },
}
</script>

<style>
  /* .router-link-active{
    color:#f00
  } */
  .active{
    color:#f00
  }
</style>
